<template>
  <div class="how">
    <div class="convert-label">{{step}}</div>
    <div class="convert-body">
      <Row :gutter="16">
        <Col span="22" :offset="1">
          <Upload
              class="upload"
              type="drag"
              :before-upload="imgHandleUpload"
              action="//jsonplaceholder.typicode.com/posts/"
              :format="format"
          >
            <Icon type="ios-cloud-upload" size="52" style="color: #259229"></Icon>
            <p>{{name}}</p>
          </Upload>
        </Col>
<!--        <Col span="2">-->
<!--          <div class="right" v-if="!(file == null)">-->
<!--          </div>-->
<!--          <div v-else class="wrong">-->
<!--          </div>-->
<!--        </Col>-->
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  name: "upload_item",
  props: {
    file:Object,
    step:String,
    format:Array,
    name:String,
  },
  mounted() {
    // console.log(this.format)
  },
  data() {
    return {

    }
  },
  methods:{
    imgHandleUpload(file){
      this.$emit('before-upload',file);
      return false;
    }
  }

}
</script>

<style scoped>
.how {
  margin-top: 30px;
  padding: 12px;
  min-height: 60px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  border-radius: .625rem;
  border: 1px solid transparent;
  transition: box-shadow .4s, transform .4s;
  margin-bottom: 20px;
}

.how:hover {
  border: 1px solid #2b932f;
  transform: translateY(-2%);
}

.convert-label {
  align-self: center;
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding: 1px 13px;
  font-size: 11px;
  line-height: 20px;
  text-transform: uppercase;
  background: #259229;
  color: #fff;
  border-radius: 3px;
  margin-bottom: 10px;
}

.convert-body {
  font-size: 13px;
  padding: 5px 0;
  text-align: center;
  /*min-height: 140px;*/
  line-height: 22px;
}

.right {
  background-image: url("../assets/right.svg");
  background-repeat: no-repeat;
  background-size: 50% 50%;
  width: 100%;
  height: 100%;
  /*background: #259229;*/
  background-position: center;
}


</style>